<template>
    <div class="conate">
        <div class="title" :style="{ '--color1': color1, '--color2': color2 }">
            <div class="left" style="display: flex;align-items: center;">
                <div class="left-1" style="flex: 1;">
                    <div class="left-1-r"></div>
                    <div class="left-1-r-1"></div>
                    <div class="left-1-r-2"></div>
                </div>
                <div class="left-2" style="display: flex; width: 50px;">
                    <div class="dy " :style="{ borderLeft: '3px solid ' + color1, borderBottom: '3px solid ' + color1 }">
                    </div>
                    <div class="dy "
                        :style="{ borderLeft: '3px solid ' + gradientColor, borderBottom: '3px solid ' + gradientColor }">
                    </div>
                    <div class="dy " :style="{ borderLeft: '3px solid ' + color2, borderBottom: '3px solid ' + color2 }">
                    </div>
                </div>
            </div>
            <div class="center">全球开源协会</div>
            <div class="right" style="display: flex;align-items: center;">
                <div class="right-1" style="display: flex; width: 50px;">
                    <!-- <div class="dy " style="border-right: 3px solid #7DF40D;border-top: 3px solid #7DF40D;"></div>
                    <div class="dy " style="border-right: 3px solid #96f43e;border-top: 3px solid #96f43e;"></div>
                    <div class="dy " style="border-right: 3px solid #AFF36F;border-top: 3px solid #AFF36F;"></div> -->

                    <div class="dy " :style="{ borderRight: '3px solid ' + color1, borderTop: '3px solid ' + color1 }">
                    </div>
                    <div class="dy "
                        :style="{ borderRight: '3px solid ' + gradientColor, borderTop: '3px solid ' + gradientColor }">
                    </div>
                    <div class="dy " :style="{ borderRight: '3px solid ' + color2, borderTop: '3px solid ' + color2 }">
                    </div>
                </div>
                <div class="right-2" style="flex: 1;">
                    <div class="right-1-r"></div>
                    <div class="right-1-r-1"></div>
                    <div class="right-1-r-2"></div>
                </div>
            </div>
        </div>
        <!-- <div class="dy">

        </div> -->
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const input = ref('')
const data = ref([
    {
        type: 'row',  //当为 row时候则为栅格布局 line则是一个横线
        flex: 1,  //表身栅格的占比高度type为row的时候独有
        row: [
            {
                type: 'label',  //type值为label表示的是一个普通文本，field表示的是一个文本字段，text的值会被后台自动替换
                text: 'dadad11111',  //文本的内容
                field: '',   //针对type值为field的时候有效，后台根据其值自动对应替换
                color: '#8DD232',  //字体颜色
                backgroundColor: '#1C9243',  //背景颜色
                fontSize: 10,   //字体大小
                fontWeight: 'bold',   //字体粗细
                flex: 1,   //占比
                alignItems: 'start',  //垂直对齐方式  start：顶 center：中  end：低对齐
                justifyContent: 'right',   //垂直水平对齐方式  left：左 center：中  right：右对齐
                padding: 10,   //内边距
                boxSizing: 'border-box',  //固定值
                borderColor: 'red',  //边框颜色
                borderStyle: 'solid',  //边框样式
                borderWidth: 1   //边框大小
            },

            {
                type: 'field',
                text: 'dadad33333',
                field: '',
                color: '#EAF10D',
                backgroundColor: '#868A18',
                fontSize: 10,
                fontWeight: 'bold',
                flex: 1,
                alignItems: 'left',
                justifyContent: 'left',
                padding: 10,
                boxSizing: 'border-box',
                borderColor: 'red',  //边框颜色
                borderStyle: 'solid',  //边框样式
                borderWidth: 1   //边框大小
            }
        ],
        backgroundColor: 'orange',  //背景颜色
        padding: 5,  //内边距
        boxSizing: 'border-box',   //内边距内包含  固定值
        show: false  //只用于配置的时候是否展示
    },
    {
        type: 'row',  //当为 row时候则为栅格布局 line则是一个横线
        flex: 1,  //表身栅格的占比高度type为row的时候独有
        row: [
            {
                type: 'label',  //type值为label表示的是一个普通文本，field表示的是一个文本字段，text的值会被后台自动替换
                text: 'dadad11111',  //文本的内容
                field: '',   //针对type值为field的时候有效，后台根据其值自动对应替换
                color: '#8DD232',  //字体颜色
                backgroundColor: '#1C9243',  //背景颜色
                fontSize: 10,   //字体大小
                fontWeight: 'bold',   //字体粗细
                flex: 1,   //占比
                alignItems: 'start',  //垂直对齐方式  start：顶 center：中  end：低对齐
                justifyContent: 'right',   //垂直水平对齐方式  left：左 center：中  right：右对齐
                padding: 10,   //内边距
                boxSizing: 'border-box',  //固定值
                borderColor: 'red',  //边框颜色
                borderStyle: 'solid',  //边框样式
                borderWidth: 1   //边框大小
            },

            {
                type: 'field',
                text: 'dadad33333',
                field: '',
                color: '#EAF10D',
                backgroundColor: '#868A18',
                fontSize: 10,
                fontWeight: 'bold',
                flex: 1,
                alignItems: 'left',
                justifyContent: 'left',
                padding: 10,
                boxSizing: 'border-box',
                borderColor: 'red',  //边框颜色
                borderStyle: 'solid',  //边框样式
                borderWidth: 1   //边框大小
            }
        ],
        backgroundColor: 'orange',  //背景颜色
        padding: 5,  //内边距
        boxSizing: 'border-box',   //内边距内包含  固定值
        show: false
    },

    {
        type: 'line',
        height: 5,  //表示横线元素高度type为line的时候独有
        lineSize: 3,  //表示横线的高度type为line的时候独有
        color: 'pink',  //横线颜色
        lineStyle: 'solid',  //横线样式
        backgroundColor: 'orange',  //背景颜色
        padding: 0,  //内边距
        boxSizing: 'border-box',   //内边距内包含  固定值
        show: false
    }
])

const color1 = ref("#F2EB03"); // 红色
const color2 = ref("#AFF36F"); // 蓝色
const gradientColor = ref('')
onMounted(() => {
    const factor = 0.5; // 渐变因子，范围为0到1
    console.log(1111, color1.value)
    gradientColor.value = getGradientColor(color1.value, color2.value, factor);
    console.log("Gradient color:", gradientColor); // 输出：渐变色

});
const hexToRgb = (hex) => {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}
const rgbToHex = (r, g, b) => {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
const getGradientColor = (color1, color2, factor) => {
    const rgb1 = hexToRgb(color1);
    const rgb2 = hexToRgb(color2);

    const gradientR = Math.round((rgb1.r + (rgb2.r - rgb1.r) * factor));
    const gradientG = Math.round((rgb1.g + (rgb2.g - rgb1.g) * factor));
    const gradientB = Math.round((rgb1.b + (rgb2.b - rgb1.b) * factor));

    return rgbToHex(gradientR, gradientG, gradientB);
}
</script>

<style lang='less' scoped>
.title {
    height: 50px;
    border: 1px solid pink;
    display: flex;
    align-items: center;
}

.title .left {
    flex: 1;
}

.title .right {
    flex: 1;
}

.title .left .left-1 {
    background: var(--color2);
    height: 3px;
    // overflow: hidden;
    /* Hide any overflow content */
    position: relative;
}

.title .left .left-1 .left-1-r {
    border-radius: 50%;
    height: 5px;
    width: 5px;
    background-image: radial-gradient(circle, var(--color1), var(--color2));
    animation: scroll-left-to-right 5s linear infinite;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 9999;
}

.title .left .left-1 .left-1-r-1 {
    border-radius: 50%;
    height: 5px;
    width: 5px;
    background-image: radial-gradient(circle, var(--color1), var(--color2));
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    z-index: 9999;
}


.title .left .left-1 .left-1-r-2 {
    border-radius: 50%;
    height: 5px;
    width: 5px;
    background-image: radial-gradient(circle, var(--color1), var(--color2));
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translate(0, -50%);
    z-index: 9999;
}

.dy {
    /* 大于号样式  */
    width: 10px;
    height: 10px;
    -webkit-transform: translate(100%, 0%) rotate(-135deg);
    transform: translate(100%, 0%) rotate(-135deg);
    box-sizing: border-box;

}

.title .right .right-2 {
    background: var(--color2);
    height: 3px;
    // overflow: hidden;
    /* Hide any overflow content */
    position: relative;
}

.title .right .right-2 .right-1-r {
    border-radius: 50%;
    height: 5px;
    width: 5px;
    background-image: radial-gradient(circle, var(--color1), var(--color2));
    animation: scroll-left-to-left 5s linear infinite;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 9999;
}

.title .right .right-2 .right-1-r-1 {
    border-radius: 50%;
    height: 5px;
    width: 5px;
    background-image: radial-gradient(circle, var(--color1), var(--color2));
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    z-index: 9999;
}


.title .right .right-2 .right-1-r-2 {
    border-radius: 50%;
    height: 5px;
    width: 5px;
    background-image: radial-gradient(circle, var(--color1), var(--color2));
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translate(0, -50%);
    z-index: 9999;
}

@keyframes scroll-left-to-right {
    0% {
        left: 0%;
    }

    100% {
        left: 100%;
    }
}

@keyframes scroll-left-to-left {
    0% {
        right: 0%;
    }

    100% {
        right: 100%;
    }
}
</style>